<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MY WEB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit"><!--360默认为极速模式打开-->
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/Second-style.css">
</head>
<body class="bg">
<div style=" " >
    <div align="center">
        <h1 class="c">2</h1>
        <a href="Third-page.html" > <img class="img2" src="../IMG/web-logo5.png" alt=""/></a></div>
    <div class="a">
        <div class="container">
            <div class="row">
                <div  class="b col-md-4" style="border-left:1px solid #979797">
                    <h1>用心聆听</h1>
                    <p>&nbsp;&nbsp;曾经以为，我会是你今生最美的遇见，会是你此生最美的霓裳，最后的风景。走过花开花落，灿烂却没有结果。曾经的伴君天涯终不悔，如今的浓浓相思曲空赋;曾 经的平生至爱我一人，如今的天涯从此各西东;曾经的此生但为君前醉，如今的望断天涯何处寻？原来再见初见时的惊艳时光，只不过是你一场有口无心的承诺。</p>
                </div>
                <div  class="b col-md-4">
                    <h1>用心聆听</h1>
                    <p>&nbsp;&nbsp;曾经以为，我会是你今生最美的遇见，会是你此生最美的霓裳，最后的风景。走过花开花落，灿烂却没有结果。曾经的伴君天涯终不悔，如今的浓浓相思曲空赋;曾 经的平生至爱我一人，如今的天涯从此各西东;曾经的此生但为君前醉，如今的望断天涯何处寻？原来再见初见时的惊艳时光，只不过是你一场有口无心的承诺。</p>
                </div>
                <div  class="b col-md-4">
                    <h1>用心聆听</h1>
                    <p>&nbsp;&nbsp;曾经以为，我会是你今生最美的遇见，会是你此生最美的霓裳，最后的风景。走过花开花落，灿烂却没有结果。曾经的伴君天涯终不悔，如今的浓浓相思曲空赋;曾 经的平生至爱我一人，如今的天涯从此各西东;曾经的此生但为君前醉，如今的望断天涯何处寻？原来再见初见时的惊艳时光，只不过是你一场有口无心的承诺。</p>
                </div>
            </div>
        </div>
        <button><b>更多精彩</b></button>
        <div class="polaroid rotate_left" id="div1" style="display: none">
            <img src="../IMG/xkd1326184.jpg" alt="" width="333" height="184">
            <p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
        </div>

        <div class="polaroid rotate_right" id="div2" style="display: none">
            <img src="../IMG/xkd2.jpg" alt="" width="333" height="184">
            <p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
        </div>
        <div class="polaroid rotate_left" id="div3" style="display: none">
            <img src="../IMG/xkd3.jpg" alt="" width="333" height="184">
            <p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
        </div>
    </div>

</div>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeIn(3000);
            $("#div2").fadeIn(4000);
            $("#div3").fadeIn(5000);
            $("#div4").fadeIn(5000);
        });
    });
</script>
</body>
</html>